<template>
  <div class="main" id="main">
    <div id="map_container">
    </div>
    <!--头部区域-->
    <!--    <div class="view-container">-->
    <div class="header" ref="header111" id="header111">
      <div class="header-left">
        <img src="../../../assets/img/porpoise_icon.png" class="porpoise-icon"/>
      </div>
      <div class="header-center">
        <div class="title">
          <span>龙阳湖景区船舶监控调度中心</span>
        </div>
      </div>
      <div class="header-right">
        <div class="weather-time-info">
          <span class="key" style="margin-right: 20px">晴</span>
          <span class="key">气温: </span>
          <span class="value">13°C</span>
          <span class="key" style="margin-right: 20px">武汉市</span>
          <span class="key" style="margin-right: 20px">2023年6月28日 周日</span>
          <span class="value">12:30:00</span>
        </div>

        <!--        <el-dropdown class="more-settings-dropdown" trigger="click">-->
        <el-dropdown class="more-settings-dropdown">
          <div class="avatar-wrapper">
            <img src="../../../assets/img/more-settings-icon.png">
            <!--            <i class="el-icon-caret-bottom"/>-->
          </div>
          <el-dropdown-menu class="el-dropdown-menu">
            <router-link to="/user/profile">
              <el-dropdown-item>个人中心</el-dropdown-item>
            </router-link>
            <!--            <el-dropdown-item @click.native="setting = true">-->
            <!--              <span>布局设置</span>-->
            <!--            </el-dropdown-item>-->
            <el-dropdown-item divided @click.native="logout">
              <span>退出登录</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <!--        <div class="more-settings">-->

        <!--        </div>-->
      </div>


      <!--      <div style="text-align: right">-->
      <!--        <el-button size="mini" @click.native="logout">退出登录</el-button>-->
      <!--      </div>-->
    </div>

    <!--中间主体区域-->
    <!--      <div class="main-body" :style="{height:mapHeight+'px'}">-->
    <div class="center-left">
      <!--实时累计金额区域-->
      <div class="realtime-money">
        <!--标题-->
        <div class="realtime-money-title">
          <div class="realtime-money-title-icon">
            <img src="../../../assets/img/money-icon.png" alt="">
          </div>
          <div class="realtime-money-title-text">
            <span>实时累计金额</span>
          </div>
        </div>
        <!--金额-->
        <div class="realtime-money-amount">
          <div class="realtime-money-amount-value">
            <span>987,987<span style="margin-left: 5px;font-size: 24px">元</span></span>
          </div>
        </div>
      </div>

      <!--往期金额查看区域-->
      <div class="history-money">
        <!--往期金额查看标题区-->
        <div class="history-money-title">
          <div class="history-money-title-icon">
            <img src="../../../assets/img/diagram-icon.png" alt="">
          </div>
          <div class="history-money-title-text">
            <span>往期金额查看</span>
          </div>
        </div>
        <div class="history-money-amount">
          <div class="history-money-amount-value">
            <span>3,879<span style="margin-left: 5px;font-size: 24px">元</span></span>
          </div>
        </div>
        <!--往期金额查看图表区-->
        <div class="history-money-diagram" ref="historyMoneyDiagram">

        </div>
      </div>
    </div>

    <!--      <div class="center-center">-->
    <!--        <div id="map_container" :style="{height:mapHeight+'px'}">-->
    <!--        </div>-->
    <!--      </div>-->

    <div class="center-right">
      <!--船只信息列表显示区域-->
      <div class="boat-info">
        <!--船只信息列表标题区-->
        <div class="boat-info-title">
          <div class="boat-info-title-icon">
            <img src="../../../assets/img/boat-info-icon.png" alt="">
          </div>
          <div class="boat-info-title-text">
            <span>船只信息</span>
          </div>
        </div>

        <!--船只信息列表区-->
        <div class="boat-info-list">
          <!--服务订单列表-->
          <div class="statusList">
            <ul class="boat-info-list-title">
              <li>编号</li>
              <li>当前航速</li>
              <li>剩余电量</li>
              <li>运行状态</li>
              <li>详情</li>
            </ul>
            <div class="boat-info-list-item" id="itemsBox" @mouseenter="rollStop()" @mouseleave="rollStart(20)">
              <div id="parentItems">
                <ul class="rolling rolStyle">
                  <li>PT23001</li>
                  <li>36KM/h</li>
                  <li>80%</li>
                  <li>正常</li>
                  <li><a href="javascript:void(0);">进入</a></li>
                </ul>
              </div>
              <div id="childItems">

              </div>
            </div>
          </div>
        </div>
      </div>

      <!--船只实时监控画面区-->
      <div class="boat-video">
        <!--船只信息列表标题区-->
        <div class="boat-video-title">
          <div class="boat-video-title-icon">
            <img src="../../../assets/img/boat-video-icon.png" alt="">
          </div>
          <div class="boat-video-title-text">
            <span>视频画面</span>
          </div>
          <div class="video-boat-select-div">
            <select id="videoBoatSelect" class="video-boat-select">
              <option>PT23001</option>
              <option>PT23002</option>
              <option selected>PT23003</option>
              <option>PT23004</option>
              <option>PT23005</option>
              <option>PT23006</option>
              <option>PT23007</option>
              <option>PT23008</option>
              <option>PT23008</option>
              <option>PT23008</option>
              <option>PT23008</option>
              <option>PT23008</option>
              <option>PT23008</option>
              <option>PT23008</option>
              <option>PT23008</option>
              <option>PT23008</option>
              <option>PT23008</option>
              <option>PT23008</option>
              <option>PT23008</option>
              <option>PT23008</option>
              <option>PT23008</option>
              <option>PT23008</option>
            </select>
          </div>
        </div>

        <div class="boat-video-div">
          <video src="../../../assets/video/游艇视频.mp4" class="video-stream" autoplay loop>
          </video>
          <div class="video-cam-change-div">
            <ul>
              <li class="front-cam active"></li>  <!--前摄-->
              <li class="back-cam"></li> <!--后摄-->
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import * as zjw_theme1 from '@/assets/echars_theme/zjw_theme1'
// import * as jquery from '@/assets/js/jquery.min'

export default {
  name: "BoatMonitor",
  data() {
    return {
      mapHeight: undefined,
      map: undefined, //百度地图对象
      boatIcon: { //船只小图标对象
        greenBoatIcon: new BMapGL.Icon("/img/boat-green.png", new BMapGL.Size(28, 28)),
        yellowBoatIcon: new BMapGL.Icon("/img/boat-yellow.png", new BMapGL.Size(28, 28)),
        redBoatIcon: new BMapGL.Icon("/img/boat-red.png", new BMapGL.Size(28, 28)),
      },
      boatStatus: {
        idle: 'idle',
        running: 'running',
        warn: 'warn',
        alarm: 'alarm'
      },
      data_info: [], //地图marker数据
      curZoom: 16, //地图当前的缩放级别
      iconSize: 24,
      labelOffsetX: 0,
      labelOffsetY: -32,
      labelFontSize: 10,
      boatInfoMap: new Map(),
      markerMap: new Map(),
      timer: null,
      listData: [
        {
          code: 'PT23001',
          speed: '36KM/h',
          power: '80%',
          status: '正常',
          detail: '进入'
        },
        {
          code: 'PT23002',
          speed: '36KM/h',
          power: '80%',
          status: '正常',
          detail: '进入'
        },
        {
          code: 'PT23003',
          speed: '36KM/h',
          power: '80%',
          status: '正常',
          detail: '进入'
        },
        {
          code: 'PT23004',
          speed: '36KM/h',
          power: '80%',
          status: '正常',
          detail: '进入'
        },
        {
          code: 'PT23005',
          speed: '36KM/h',
          power: '80%',
          status: '正常',
          detail: '进入'
        },
        {
          code: 'PT23006',
          speed: '36KM/h',
          power: '80%',
          status: '正常',
          detail: '进入'
        },
        {
          code: 'PT23007',
          speed: '36KM/h',
          power: '80%',
          status: '正常',
          detail: '进入'
        },
        {
          code: 'PT23008',
          speed: '36KM/h',
          power: '80%',
          status: '正常',
          detail: '进入'
        },
        {
          code: 'PT23009',
          speed: '36KM/h',
          power: '80%',
          status: '正常',
          detail: '进入'
        },
        {
          code: 'PT23010',
          speed: '36KM/h',
          power: '80%',
          status: '正常',
          detail: '进入'
        },
        {
          code: 'PT23011',
          speed: '36KM/h',
          power: '80%',
          status: '正常',
          detail: '进入'
        },
        {
          code: 'PT23012',
          speed: '36KM/h',
          power: '80%',
          status: '正常',
          detail: '进入'
        },
        {
          code: 'PT23013',
          speed: '36KM/h',
          power: '80%',
          status: '正常',
          detail: '进入'
        },
        {
          code: 'PT23014',
          speed: '36KM/h',
          power: '80%',
          status: '正常',
          detail: '进入'
        },
        {
          code: 'PT23015',
          speed: '36KM/h',
          power: '80%',
          status: '正常',
          detail: '进入'
        },
        {
          code: 'PT23016',
          speed: '36KM/h',
          power: '80%',
          status: '正常',
          detail: '进入'
        },
        {
          code: 'PT23017',
          speed: '36KM/h',
          power: '80%',
          status: '正常',
          detail: '进入'
        },
        {
          code: 'PT23018',
          speed: '36KM/h',
          power: '80%',
          status: '正常',
          detail: '进入'
        },
        {
          code: 'PT23019',
          speed: '36KM/h',
          power: '80%',
          status: '正常',
          detail: '进入'
        },
        {
          code: 'PT23020',
          speed: '36KM/h',
          power: '80%',
          status: '正常',
          detail: '进入'
        }
      ]
    }
  },
  created() {
  },
  beforeMount() {

  },
  beforeDestroy() {
    if (this.timer) clearInterval(this.timer);
  },
  mounted() {
    console.log("mounted execute.")

    // this.markerMap = new Map();

    //设置地图div的高度
    this.mapHeight = window.innerHeight - 100;
    //初始化地图
    this.initMap();

    //初始化往期金额图表
    this.initDiagram();

    //往船只信息列表中填充数据
    this.fillList();

    this.roll(20);

    this.resize('main', 1920, 1080)
    var lazyFun;
    var that = this;
    window.onresize = function () {
      clearTimeout(lazyFun);
      lazyFun = setTimeout(function () {
        that.$nextTick(() => {
          console.log("自动调整屏幕大小")
          // console.log("that: ", that)
          that.resize('main', 1920, 1080)
        })
      }, 500);
    };

    this.testBoatDrive();
  },
  methods: {

    roll(t) {
      var parentItems = document.getElementById('parentItems');
      var childItems = document.getElementById('childItems');
      var itemsBox = document.getElementById('itemsBox');
      childItems.innerHTML = parentItems.innerHTML;
      itemsBox.scrollTop = 0;
      this.rollStart(t);
    },
    rollStart(t) {
      var parentItems = document.getElementById('parentItems');
      var childItems = document.getElementById('childItems');
      var itemsBox = document.getElementById('itemsBox');
      this.rollStop();
      this.timer = setInterval(() => {
        // 当滚动高度大于列表内容高度时恢复为0
        if (itemsBox.scrollTop >= parentItems.scrollHeight) {
          itemsBox.scrollTop = 0;
        } else {
          itemsBox.scrollTop += 1;
        }
      }, t);
    },
    rollStop() {
      clearInterval(this.timer);
    },
    fillList: function () {
      var $parentItems = $('#parentItems');
      var itemsArr = [];
      $.each(this.listData, function (ind, key) {
        itemsArr.push(
          // '<ul class="rolling rolStyle">',
          '<ul class="" id="list1">',
          '<li>', key.code, '</li>',
          '<li>', key.speed, '</li>',
          '<li>', key.power, '</li>',
          '<li>', key.status, '</li>',
          '<li>', key.detail, '</li>',
          '</ul>'
        )
      })
      $parentItems.html(itemsArr.join(''));
    },
    resize(el, width, height) {
      var _el = document.getElementById(el);
      // var hScale = window.innerHeight / height;
      // var wScale = window.innerWidth / width;
      // _el.style.transform = 'scale(' + wScale + ',' + hScale + ')'
      // 获取窗口的宽度和高度，不包括滚动条
      var w = document.documentElement.clientWidth;
      var h = document.documentElement.clientHeight;
      // console.log(window.innerWidth, window.innerHeight)
      console.log(w, h)
      _el.style.width = w + 'px';
      _el.style.height = h + 'px';
      this.mapHeight = h - 100;
      console.log("this.mapHeight: ", this.mapHeight)
    },

    /**
     * 初始化地图。
     */
    initMap() {
      //设置区域点，map根据这些点计算出合适的中心点和地图缩放级别。
      var leftTopPoint = new BMapGL.Point(114.181357, 30.571459);
      var leftBottomPoint = new BMapGL.Point(114.180422, 30.551775);
      var rightTopPoint = new BMapGL.Point(114.21118, 30.565769);
      var rightBottomPoint = new BMapGL.Point(114.210426, 30.555258);
      var centerPoint = new BMapGL.Point(114.192675, 30.560172);

      this.map = new BMapGL.Map('map_container', {
        minZoom: 16,
        maxZoom: 19
      });

      var viewport = this.map.getViewport([leftTopPoint, leftBottomPoint, rightTopPoint, rightBottomPoint, centerPoint], {
        zoomFactor: 0
      });

      var data_info = [
        {
          code: 'PT23001',
          lon: 114.18614,
          lat: 30.560898,
          status: 'running',
          rotation: 90,
        },
        {
          code: 'PT23002',
          lon: 114.18614,
          lat: 30.559394,
          status: 'running',
          rotation: 30
        },
        {
          code: 'PT23003',
          lon: 114.186261,
          lat: 30.557625,
          status: 'warn',
          rotation: -30
        },
        {
          code: 'PT23004',
          lon: 114.19298,
          lat: 30.556413,
          status: 'warn',
          rotation: 30
        },
        {
          code: 'PT23005',
          lon: 114.188872,
          lat: 30.561068,
          status: 'warn',
          rotation: -60
        },
        {
          code: 'PT23006',
          lon: 114.190453,
          lat: 30.55715,
          status: 'alarm',
          rotation: 30
        },
      ]

      this.curZoom = viewport.zoom;

      this.map.centerAndZoom(viewport.center, this.curZoom);
      this.map.enableScrollWheelZoom(true);

      this.adjustRelativeParams(this.curZoom);
      // this.updateAllMarkers(this.createOrUpdateAllMarker(data_info));

      this.initBoatInfo(data_info);
      this.initAllMark();

      //加载自定义的地图样式
      // map.setMapStyleV2({
      //   // styleId: 'd958af687f89d5d9e9b9be43874ddeb5' //我自己的地图样式
      //   styleId: '3fd7566ab3362219fd6c7898e9cd84a0' //璀璨提供的地图样式
      // })

      // console.log("this.$refs.header: ", this.$refs.header111.tagName)

      var that = this;
      fetch("../map/custom_map_config.json")
        .then(res => {
          if (res.status === 200) {
            //json()是返回的Response对象提供的一个异步方法,会把返回的json字符串反序列化成对象,也被包装成一个Promise了。
            // 注意：json()方法只能调用一次，后面再次调用将无法获取到数据。
            var promiseJson = res.json();
            console.log("res promiseJson= ", promiseJson)
            return promiseJson
          } else {
            return {}
          }
        })
        .then(text => {
          // console.log("setMapStyleV2, text= ", text)
          // console.log("fetch this= ", this) //此处的this就是当前vue组件
          that.map.setMapStyleV2({
            styleJson: text
          })

        });

      // 添加比例尺控件
      var scaleCtrl = new BMapGL.ScaleControl();
      this.map.addControl(scaleCtrl);
      // 添加地图缩放控件
      var zoomCtrl = new BMapGL.ZoomControl();
      this.map.addControl(zoomCtrl);


      //监听地图比例缩放事件
      this.map.addEventListener("zoomend", function () {
        // 监听地图缩放事件
        var curMapZoom = that.map.getZoom();
        console.log("curMapZoom= ", curMapZoom)

        that.adjustRelativeParams(curMapZoom);

        // console.log("that.data_info= ", that.data_info)
        that.updateAllMarkers()
        // that.updateAllMarkerAfterZoomed(); //此方法实测有问题
      });
    },

    /**
     * 调整marker相关参数的大小。
     * @param curMapZoom
     */
    adjustRelativeParams(curMapZoom) {
      let iconSize = 22;
      let labelOffsetX = -5;
      let labelOffsetY = -30;
      let labelFontSize = 12; //谷歌浏览器最小字体为12px

      if (curMapZoom < 16.5) {
        iconSize = 22;
        labelFontSize = 12;
        labelOffsetY = -30;
      } else if (curMapZoom >= 16.5 && curMapZoom < 17) {
        iconSize = 26;
        labelFontSize = 13;
        labelOffsetY = -32;
      } else if (curMapZoom >= 17 && curMapZoom < 17.5) {
        iconSize = 32;
        labelFontSize = 14;
        labelOffsetY = -36;
      } else if (curMapZoom >= 17.5 && curMapZoom < 18) {
        iconSize = 38;
        labelFontSize = 15;
        labelOffsetY = -40;
      } else if (curMapZoom >= 18 && curMapZoom < 18.5) {
        iconSize = 44;
        labelFontSize = 15;
        labelOffsetY = -44;
      } else {
        iconSize = 50;
        labelFontSize = 15;
        labelOffsetY = -46;
      }
      this.iconSize = iconSize;
      this.labelOffsetX = labelOffsetX;
      this.labelOffsetY = labelOffsetY;
      this.labelFontSize = labelFontSize;
    },

    initBoatInfo(data_info) {
      // this.boatInfoMap = new Map();
      for (let i = 0; i < data_info.length; i++) {
        this.boatInfoMap.set(data_info[i].code, data_info[i])
      }
    },

    initAllMark() {
      // this.markerMap = new Map();
      this.boatInfoMap.forEach((boatInfo, code, map) => {
        this.addOrRecreateMarker(boatInfo)
      })
      console.log("this.markerMap= ", this.markerMap)
    },

    /**
     * 更新地图上的所有marker。
     * @param markers
     */
    updateAllMarkers() {
      console.log("updateAllMarkers execute.")
      //更新marker前先移除原有的所有marker
      for (let i = 0; i < this.markerMap.length; i++) {
        this.map.removeOverlay(this.markerMap[i]);
      }
      //重新创建并添加所有的marker。
      this.boatInfoMap.forEach((boatInfo, code, map) => {
        this.addOrRecreateMarker(boatInfo)
      })
    },

    updateAllMarkerAfterZoomed() {
      this.markerMap.forEach((marker, code, map) => {
        var boatInfo = this.getBoatInfoByCode(code);
        var newIcon = this.createIcon(boatInfo.status);
        var newLabel = this.createLabel(boatInfo.code);
        marker.setIcon(newIcon);
        marker.setLabel(newLabel);
      })
    },

    getBoatInfoByCode(code) {
      let boatInfo = undefined;
      this.boatInfoMap.forEach((value, key, map) => {
        if (key === code) boatInfo = value;
      })
      return boatInfo;
    },

    createIcon(status) {
      var icon;
      var iconSize = this.iconSize;
      switch (status) {
        case this.boatStatus.running:
          icon = new BMapGL.Icon("/img/boat-green.png", new BMapGL.Size(iconSize, iconSize), {anchor: new BMapGL.Size(iconSize / 2, iconSize / 2)});
          break
        case this.boatStatus.warn:
          icon = new BMapGL.Icon("/img/boat-yellow.png", new BMapGL.Size(iconSize, iconSize), {anchor: new BMapGL.Size(iconSize / 2, iconSize / 2)});
          break
        case this.boatStatus.alarm:
          icon = new BMapGL.Icon("/img/boat-red.png", new BMapGL.Size(iconSize, iconSize), {anchor: new BMapGL.Size(iconSize / 2, iconSize / 2)});
          break
        default:
          icon = new BMapGL.Icon("/img/boat.png", new BMapGL.Size(iconSize, iconSize), {anchor: new BMapGL.Size(iconSize / 2, iconSize / 2)});
      }
      return icon;
    },

    createLabel(content) {
      console.log("createLabel this.labelFontSize= ", this.labelFontSize)
      var label = new BMapGL.Label(content.substr(4, 3), {offset: new BMapGL.Size(this.labelOffsetX, this.labelOffsetY)});
      label.setStyle({
        border: "1px solid rgb(204, 204, 204)",
        color: "rgb(0, 0, 0)",
        borderRadius: "5px",
        padding: "1px",
        background: "rgba(252,249,249,0.89)",
        fontSize: this.labelFontSize + "px",
        fontWeight: 400
      });
      return label;
    },


    /**
     * 更新指定marker(此方法不更新且也不能更新label)。
     * @param marker
     */
    // {
    //   code: 'PT23001',
    //   lon: 114.18614,
    //   lat: 30.560898,
    //   status: 'running',
    //   rotation: 90,
    // }
    updateMarker(boatInfo) {
      console.log("boatInfo: ", boatInfo)
      this.markerMap.forEach((marker, code, map) => {
        if (code === boatInfo.code) {
          marker.setPosition(new BMapGL.Point(boatInfo.lon, boatInfo.lat));
          marker.setIcon(this.createIcon(boatInfo.status));
          marker.setRotation(boatInfo.rotation);
        }
      })
    },


    /**
     * 根据boatInfo创建一个marker。
     * @param boatInfo
     * @returns {BMapGL.Marker}
     */
    createMarker(boatInfo) {
      var icon = this.createIcon(boatInfo.status);
      const marker = new BMapGL.Marker(new BMapGL.Point(boatInfo.lon, boatInfo.lat), {
        icon: icon,
        // rotation: data_info[i].rotation //通过这里设置实测无效
      });
      marker.setRotation(boatInfo.rotation);
      marker.setLabel(this.createLabel(boatInfo.code));
      return marker;
    },

    addOrRecreateMarker(boatInfo) {
      //如果地图上已存在与此code相同的marker则先将其从地图上移除
      if (this.markerMap.has(boatInfo.code)) {
        var oldMarker = this.markerMap.get(boatInfo.code);
        this.map.removeOverlay(oldMarker);
      }
      var newMarker = this.createMarker(boatInfo);
      this.map.addOverlay(newMarker);
      this.markerMap.set(boatInfo.code, newMarker);
      this.boatInfoMap.set(boatInfo.code, boatInfo);
    },

    /**
     * 退出登录。
     * @returns {Promise<void>}
     */
    async logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          location.href = '/index';
        })
      }).catch(() => {
      });
    },

    /**
     * 初始化往期金额图表。
     */
    initDiagram() {
      // var diagramEchart = echarts.init(this.$refs.historyMoneyDiagram, "dark");
      var diagramEchart = echarts.init(this.$refs.historyMoneyDiagram, "zjw_theme1");
      var option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
          }
        ]
      };
      option && diagramEchart.setOption(option);
    },

    testBoatDrive() {
      let testData = [
        {
          code: 'PT23004',
          lon: 114.19298,
          lat: 30.556413,
          status: 'warn',
          rotation: 30
        },
        {
          code: 'PT23004',
          lon: 114.193088,
          lat: 30.556211,
          status: 'warn',
          rotation: 60
        }, {
          code: 'PT23004',
          lon: 114.194215,
          lat: 30.555748,
          status: 'warn',
          rotation: 90
        },
      ];
      let n = 0;
      let that = this;
      var intervalId = setInterval(function () {
        that.updateMarker(testData[n++ % testData.length])
      }, 3000);
    },


  }
}
</script>

<style scoped>
.main {
  width: 100%;
  height: 100%;
  /*我自己吸的地图陆地颜色*/
  /*background-color: #052d3d;*/
  /*background-color: #0B313F;*/
  /*font-weight: 700;*/
}

#map_container {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: "微软雅黑";
}

.view-container {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  /*background-color: pink;*/
}

>>> ul li, ol li {
  list-style: none;
}

.header {
  width: 100%;
  height: 100px;
  background: url("~@/assets/img/header_bac.png") 0px 0px/100% 100% no-repeat;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
}

.header-left {
  float: left;
  width: 30%;
  height: 100%;
  /*background-color: pink;*/
  /*background: url("~@/assets/img/porpoise_icon.png") 15px 50px/75% 35% no-repeat;*/
}

.porpoise-icon {
  width: 268px;
  height: 36px;
  margin: 50px 5px 10px 35px;
}

.header-center {
  float: left;
  width: 40%;
  height: 100%;
  /*background-color: green;*/
}

.header-right {
  float: left;
  width: 30%;
  height: 100%;
  /*background-color: #00afff;*/
  position: relative;
}

.weather-time-info {
  /*text-align: center;*/
  /*line-height: 100%;*/
  /*font-size: 18px;*/
  margin: 65px 0 20px 0;
  padding-left: 20px;
  /*float: left;*/
}

.weather-time-info .key {
  /*color: #1d8b9e;*/
  color: #72ddda;
}

.weather-time-info .value {
  color: #72ddda;
  margin-right: 10px;
}

.more-settings-dropdown {
  /*float: left;*/
  /*margin: 62px 10px 20px 70px;*/
  cursor: pointer;
  position: absolute;
  right: 20px;
  bottom: 12px;
}

.more-settings-dropdown div img {
  width: 20px;
  height: 20px;
  /*text-align: right;*/
}

.title {
  height: 100%;
  text-align: center;
  color: white;
  font-size: 36px;
  line-height: 100px;
}

.main-body {
  width: 100%;
  /*display: flex;*/
}

.center-left {
  /*float: left;*/
  width: 26%;
  height: 100%;
  background: url("~@/assets/img/center-left-bg.png") 0 0/100% 100% no-repeat;
  /*background-color: green;*/
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
}

.realtime-money {
  /*height: 30%;*/
  background: url("~@/assets/img/realtime_money_bg.png") 0 0/100% 100% no-repeat;
  margin: 120px 0 15px 10px;
  /*margin-bottom: 15px;*/
  padding: 25px 10px;
}

.realtime-money-title {
  width: 100%;
  height: 60px;
  margin-bottom: 10px;
  background: url("~@/assets/img/title-bg.png") 10px 5px/90% 90% no-repeat;
  /*background-color: pink;*/
}

.realtime-money-title-icon {
  float: left;
  height: 100%;
  margin-left: 25px;
  /*background-color: red;*/
}

.realtime-money-title-icon > img {
  width: 45px;
  height: 45px;
  margin-top: 8px;
}

.realtime-money-title-text {
  float: left;
  height: 100%;
  margin-left: 10px;
  /*background-color: purple;*/
  text-align: center;
  line-height: 60px;
  color: white;
  font-weight: 700;
  font-size: 16px;
}

.realtime-money-amount {
  width: 100%;
  height: 150px;
  /*background-color: pink;*/
}

.realtime-money-amount-value {
  height: 100%;
  background: url("~@/assets/img/digit-bg.png") 25px 0/90% 90% no-repeat;
  /*background-color: purple;*/
  text-align: center;
  line-height: 150px;
  color: white;
  font-weight: 700;
  font-size: 65px;
}

.history-money {
  /*height: 70%;*/
  background: url("~@/assets/img/history_money_bg.png") 0 0/100% 100% no-repeat;
  margin: 0 0 15px 10px;
  padding: 25px 10px 0px;
  /*min-height: 180px;*/
}

.history-money-title {
  height: 60px;
  width: 100%;
  margin: 10px 0;
  background: url("~@/assets/img/title-bg.png") 10px 5px/90% 90% no-repeat;
  /*background-color: pink;*/
}

.history-money-title-icon {
  float: left;
  height: 100%;
  margin-left: 25px;
  /*background-color: red;*/
}

.history-money-title-icon > img {
  width: 45px;
  height: 45px;
  margin-top: 8px;
}

.history-money-title-text {
  float: left;
  height: 100%;
  margin-left: 10px;
  /*background-color: purple;*/
  text-align: center;
  line-height: 60px;
  color: white;
  font-weight: 700;
  font-size: 16px;
}

.history-money-amount {
  width: 100%;
  height: 150px;
  /*background-color: pink;*/
}

.history-money-amount-value {
  height: 100%;
  background: url("~@/assets/img/digit-bg.png") 25px 0px/90% 90% no-repeat;
  /*background-color: purple;*/
  text-align: center;
  line-height: 150px;
  color: white;
  font-weight: 700;
  font-size: 65px;
}

.history-money-diagram {
  min-height: 250px;
  /*height: 70%;*/
  width: 90%;
  margin: 0 auto;
}

.center-center {
  float: left;
  width: 48%;
  height: 100%;
  /*background-color: green;*/
}

.center-right {
  /*float: right;*/
  width: 26%;
  height: 100%;
  background: url("~@/assets/img/center-right-bg.png") 0 0/100% 100% no-repeat;
  /*background-color: #00afff;*/
  position: fixed;
  z-index: 999;
  top: 0;
  right: 0;
}

.boat-info {
  /*height: 30%;*/
  background: url("~@/assets/img/boat-info-bg.png") 0 0/100% 100% no-repeat;
  margin: 120px 10px 20px 0;
  /*margin-bottom: 15px;*/
  padding: 15px 10px;
}

.boat-info-title {
  width: 100%;
  height: 60px;
  margin-bottom: 10px;
  background: url("~@/assets/img/title-bg.png") 10px 5px/90% 90% no-repeat;
  /*background-color: pink;*/
}

.boat-info-title-icon {
  float: left;
  height: 100%;
  margin-left: 25px;
  /*background-color: red;*/
}

.boat-info-title-icon > img {
  width: 45px;
  height: 45px;
  margin-top: 8px;
}

.boat-info-title-text {
  float: left;
  height: 100%;
  margin-left: 10px;
  /*background-color: purple;*/
  text-align: center;
  line-height: 60px;
  color: white;
  font-weight: 700;
  font-size: 16px;
}

.boat-info-list {
  margin-top: 10px;
  width: 100%;
  /*background-size: 100%;*/
}

.statusList {
  width: 100%;
  /*margin: 5px auto 0;*/
}

.statusList .boat-info-list-title {
  /*float: left;*/
  width: 100%;
  padding-bottom: 0;
  /*overflow: hidden;*/
  /*display: flex;*/
  height: 40px;
}

.statusList .boat-info-list-title li {
  float: left;
  width: 20%;
  height: 100%;
  font-size: 16px;
  color: #ededec;
  /*background: #093e79;*/
  /*padding: 10px 0;*/
  margin: 0 0;
  text-align: center;
  line-height: 40px;
}

>>> .boat-info-list-item {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 260px;
}

>>> .statusList .boat-info-list-item ul {
  height: 30px;
}

>>> .statusList .boat-info-list-item ul:nth-child(odd) {
  color: rgba(245, 239, 239, 0.94);
}

>>> .statusList .boat-info-list-item ul:nth-child(even) {
  background-color: #043645;
  color: rgba(245, 239, 239, 0.94);
}

>>> .statusList .boat-info-list-item ul li {
  width: 20%;
  float: left;
  line-height: 30px;
  /*padding: 10px 0;*/
  text-align: center;
  /*overflow: hidden;*/
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 0 0;
  font-size: 16px;
}

.statusList .boat-info-list-item ul li:first-child {
  /*font-size: 12px !important;*/
}

.boat-video {
  /*height: 30%;*/
  background: url("~@/assets/img/boat-info-bg.png") 0 0/100% 100% no-repeat;
  margin: 0 10px 0 0;
  padding: 15px 10px;
}

.boat-video-title {
  position: relative;
  width: 100%;
  height: 60px;
  /*margin-bottom: 10px;*/
  background: url("~@/assets/img/title-bg.png") 10px 5px/90% 90% no-repeat;
  /*background-color: pink;*/
  line-height: 60px;
  text-align: center;
}

.boat-video-title-icon {
  float: left;
  height: 100%;
  margin-left: 25px;
  /*background-color: red;*/
}

.boat-video-title-icon > img {
  width: 45px;
  height: 45px;
  margin-top: 8px;
}

.boat-video-title-text {
  float: left;
  height: 100%;
  margin-left: 10px;
  /*background-color: purple;*/
  text-align: center;
  line-height: 60px;
  color: white;
  font-weight: 700;
  font-size: 16px;
}

.boat-video-div {
  width: 100%;
  /*height: 300px;*/
  /*overflow: hidden;*/
}

.boat-video-div .video-stream {
  width: 100%;
  height: 250px;
  object-fit: fill;
  margin: 10px 0 0;
}

.video-cam-change-div {
  width: 100%;
  height: 20px;
  /*background-color: pink;*/
  text-align: center;
  line-height: 30px;
}

.video-cam-change-div ul li {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(245, 239, 239, 0.47);
  margin-right: 2px;
  cursor: pointer;
}

.video-cam-change-div ul li.active {
  background-color: #13e513;
}

.video-boat-select-div {
  /*background-color: pink;*/
  height: 25px;
  margin: 20px 0 0;
  float: right;
}

.video-boat-select-div select {
  height: 100%;
  background-color: transparent;
  color: rgba(245, 239, 239, 0.94);
  border-top-right-radius: 8px;
  /*position: absolute;*/
  z-index: 100;
}

.video-boat-select-div select option {
  background-color: rgba(49, 47, 47, 0.94);
}


</style>
